<script lang="ts" setup>
import { watch } from 'vue'

const query = withDefaults(
  defineProps<{
    value: number
    top?: number
    right?: number
    backgroundColor?: string
  }>(),
  {
    top: 0,
    right: 0,
    backgroundColor: '#FFBD27',
  },
)
</script>

<template>
  <view
    class="BjsCornerMark"
    :style="{
      top: query.top + 'rpx',
      right: query.right + 'rpx',
      backgroundColor: query.backgroundColor,
      transform: query.backgroundColor === '#FF4E21' ? 'translateX(50%)' : 'translateX(0)',
    }"
  >
    {{ query.value }}</view
  >
</template>

<style lang="scss">
.BjsCornerMark {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 8rpx;
  min-width: 40rpx;
  height: 40rpx;
  font-size: 24rpx;
  color: #fff;
  border-radius: 20rpx;
  border: 4rpx solid #fff;
  box-sizing: border-box;
  background-color: $uni-color-motif;
  z-index: 99;
}
</style>
